/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

function Graph(){
    
    var nullx = 50;
    var nully = 270;
          
    
     
    
    
    this.drawPieChart = function(datatab, title) {
           
           this.datatab = datatab;
          
           this.canvas = document.getElementById('canvas');
           
           document.getElementById('canvas').style.display = '';
           
           var height = this.canvas.offsetHeight -2;
           var w = this.canvas.offsetWidth -2;
           
           var lastendpoint = 0.0; // setter startpunkt
        
           var color = ["#B2E2F9", "#9D9BCD", "#9BCDB2", "#BBCD9B", "#CDC19B", "#CDC69B"]; //forskjellige farger til sektorene
           var position= height/6;
            if (this.canvas.getContext) { 
              
                var drw = this.canvas.getContext('2d');
                
                drw.fillStyle ="#5D5D5D";
                drw.fill();
                drw.font         = 'bold '+ height*0.0733+'px sans-serif';
                drw.fillText(title, height/12,height/12);
                
                for(var i=0; i< datatab.length; i++){

                              //start 
                        var percent = datatab[i][1] / this.getTotal(datatab); //beregner hvor mange prosent av sirkelen "kaken" skal utgjøre
                        drw.beginPath();
                        drw.lineTo(height/2,height/2); //tegner linje til sentrum fra "kakens" startpunkt
                        
                        drw.arc(height/2,height/2,height/3,lastendpoint, lastendpoint+ percent *2*Math.PI, false); //tegner delen av sirkelen 
                       
                        drw.lineTo(height/2,height/2); //tegner linje til sentrum fra "kakens" endepunkt
                        drw.strokeStyle = "#ffffff";
                        drw.stroke();
                        //drw.shadowOffsetX = 1;
                        //drw.shadowOffsetY = 1;
                        //drw.shadowBlur = 3;
                        //drw.shadowColor = "#BABABA";
                        //drw.globalAlpha = 0.5;
                        drw.fillStyle = "#000000";
                        drw.fill();
                        drw.font         = 'normal ' +height*0.04+'px sans-serif';
                        drw.fillText(datatab[i][0] + ":     "+(percent *100).toFixed(1) +"%" , height*0.97, position+ height/40); 
                        drw.rect(height*0.866, position, height/30, height/30);
                        drw.fillStyle = color[i];
                        drw.fill();
                        drw.stroke();
                        
                        lastendpoint += (percent *2*Math.PI); //oppdaterer startpunkt til neste løkkegjennomgang
                        position += height/10;
                        
                        
                        
                }
                

            } 
            
           }
           
      this.drawGraph = function(datatab, title, xaxisname, yaxisname){
            //document.getElementById('canvas').style.display = 'none';
            //document.getElementById('canvas2').style.display = 'none';
            //document.getElementById('canvas1').style.display = '';
            this.datatab = datatab;

            this.canvas = document.getElementById('graphcanvas');
            var h = this.canvas.offsetHeight -2;

            if (this.canvas.getContext) { 
                var lasty;
                var lastx;
                var drw = this.canvas.getContext('2d');
                var yh = this.findYheight(datatab);
                var xw = this.findXwidth(datatab);

                this.printAxis(drw, xaxisname, yaxisname, this.findYMax(datatab), this.findXMax(datatab));
                
                drw.fillStyle ="#5D5D5D";
                drw.fill();
                drw.font         = 'bold 22px sans-serif';
                drw.fillText(title, 25,25);

                for(var i=0; i< datatab.length+1; i++){
                    var x = (h*0.1666) + (datatab[i][0] * xw);
                    var y = (h*0.9) - (datatab[i][1] * yh);
                    
                    drw.strokeStyle = "#506DEC";
                    this.drawLine(drw, lastx,lasty, x, y);
                    drw.rect(x-2, y-2, 2, 2);
                    drw.stroke();
                    lastx = x;
                    lasty = y;
                }
                
                
          }
      }
          
           
      this.getTotal = function(datatab){
          var total = 0;
          for(var i =0; i<datatab.length; i++){
              
              total += datatab[i][1];
              
          }
          return total;
         
      }
      
      this.printAxis = function(drw, yname, xname, yvalue, xvalue){
          
          this.canvas = document.getElementById('graphcanvas');
          var h = this.canvas.offsetHeight -2;
          
            var xhalf = xvalue/2;
            drw.strokeStyle = "#808080";
            
            this.drawLine(drw, h*0.16,h*0.253, h*0.166,h*0.2333);       // Tegner pil på x-aksen
            this.drawLine(drw, h*0.1733,h*0.253, h*0.166, h*0.233);       // Tegner pil på x-aksen
            this.drawLine(drw, h*1.313,h*0.9066, h*1.333, h*0.9);  // Tegner pil på y-aksen
            this.drawLine(drw, h*1.313,h*0.8933, h*1.333, h*0.9);  // Tegner pil på y-aksen
            this.drawLine(drw, h*0.166,h*0.233 , h*0.166,h*0.9);     // Tegner x-aksen
            this.drawLine(drw, h*0.166, h*0.9, h*1.333, h*0.9);  // Tegner y-aksen
            
            var aw = (h*1.333)-(h*0.166);
            this.drawLine(drw,(h*0.166)+1*aw/4, h*0.9066, (h*0.166)+1*aw/4,h*0.8933  );
           // this.drawLine(drw,(h*0.166)+2*aw/4, h*0.9066, (h*0.166)+2*aw/4,h*0.8933  );
            this.drawLine(drw,(h*0.166)+3*aw/4, h*0.9066, (h*0.166)+3*aw/4,h*0.8933  );
            //this.drawLine(drw,(h*0.166)+4*aw/4, h*0.9066, (h*0.166)+4*aw/4,h*0.8933  );
            
            drw.stroke();
            drw.beginPath();
            drw.strokeStyle = "#e6e6e6";
            this.drawLine(drw, h*0.1833,h*0.567 , h*1.317,h*0.567); //Tegner midtlinje
            drw.stroke();
            
            drw.beginPath();
            
            drw.font         = 'italic 100% sans-serif';
            drw.fillText(xname, h*0.333,h*0.2);
            drw.fillText(yname, h*1.42,h*0.8167);
            drw.stroke();
            
            drw.beginPath();
            drw.font         = 'bold 12px sans-serif';
            drw.fillText(xvalue, h*0.1,h*0.2);
            drw.fillText(xhalf, h*0.08,h*0.5833);
            
            drw.fillText(yvalue, h*1.333,h*0.95);
            drw.fillText((yvalue/4), h*0.166+(((h*1.333-h*0.166)/4)), h*0.95);
            drw.fillText((yvalue/4)*3, h*0.166+(((h*1.333-h*0.166)/4)*3), h*0.95);
            
            drw.stroke();
          
      }
      
      this.drawLine = function(drw,startx, starty, endx, endy){
          
         
          drw.moveTo(startx,starty);
          drw.lineTo(endx,endy);
          
      }
      
      
      this.findYheight = function(tab){
          
          this.canvas = document.getElementById('graphcanvas');
          var h = (this.canvas.offsetHeight -2) * 0.6666;
          var max = 0;
          for(var i =0; i<tab.length; i++){
              
              if(max<tab[i][1]){
              max = tab[i][1];
              
              }
              
              
          }
          return h/max;
          
      }
      
      this.findXwidth = function(tab){
          
          this.canvas = document.getElementById('graphcanvas');
          var h = this.canvas.offsetHeight -2;
          h = h*1.333 - h*0.1666;
          var max = 0;
          for(var i =0; i<tab.length; i++){
              
              if(max<tab[i][0]){
              max = tab[i][0];
              
              }
              
              
          }
          return h/max;
          
      }
      
         this.findXMax = function(tab){
          
          this.canvas = document.getElementById('graphcanvas');
          var h = this.canvas.offsetHeight -2;
          var max = 0;
          for(var i =0; i<tab.length; i++){
              
              if(max<tab[i][1]){
              max = tab[i][1];
              
              }
              
              
          }
          return max;
          
      }
      
      this.findYMax = function(tab){
          
          this.canvas = document.getElementById('graphcanvas');
          var h = this.canvas.offsetHeight -2;
          var max = 0;
          for(var i =0; i<tab.length; i++){
              
              if(max<tab[i][0]){
              max = tab[i][0];
              
              }
              
              
          }
          return max;
          
      }
     this.drawBarRate = function(tab) { 
         
        
          
          document.getElementById('canvas2').style.display = '';
          var boy = document.getElementById('canvas2').getContext('2d');
          var grl = document.getElementById('canvas2').getContext('2d');
          var img = new Image();
          img.onload = function(){
          boy.drawImage(img,0,0); 
          grl.drawImage(img,0,0); 
           
          var x;
          var y;
        
         
          for(var i =0;i < tab.length-4 ; i++){
     
          boy.beginPath();
      /*    
          boy.moveTo(61+i*50*2,230); 
          boy.lineTo(61+i*50*2,230-tab[i+i]*20);
          boy.lineTo(81+i*50*2,230-tab[i+i]*20);
          boy.lineTo(81+i*50*2,230);
        */  
           boy.moveTo(220,53+i*50); 
           boy.lineTo(220+tab[i+i]*20,53+i*50);
           boy.lineTo(220+tab[i+i]*20,67+i*50);
           boy.lineTo(220,67+i*50);
           
          boy.fillStyle = "#8ED6FF";
          boy.fill();
          boy.lineWidth = 1;
          boy.stroke();
         /* 
          grl.beginPath();
          grl.moveTo(86+i*50*2,230);
          grl.lineTo(86+i*50*2,230-tab[1+i+i]*20);
          grl.lineTo(106+i*50*2,230-tab[1+i+i]*20);   
          grl.lineTo(106+i*50*2,230);
           */
           grl.beginPath();
           grl.moveTo(220,70+i*25*2); 
           grl.lineTo(220+tab[1+i+i]*20,70+i*25*2);
           grl.lineTo(220+tab[1+i+i]*20,84+i*25*2);
           grl.lineTo(220,84+i*25*2);
          
          
          grl.fillStyle = "pink";
          grl.fill();
          grl.lineWidth = 1;
          grl.stroke(); 
          
         
/*
        var can = document.getElementById("canvas2");
         var c = can.getContext('2d');
          can.onmousemove = function(e) {
        x = e.pageX - can.offsetLeft,
        y = e.pageY - can.offsetTop;
       
       for(var j=0;j<4;j++){
        if((x>=86+j*50*2 && x<=106+j*50*2)&& (y<=230 && y>230-tab[1+j+j]*20)){
             c.fillStyle = "black";
             c.font = "italic 96pt Arial ";
             c.fillText("this is text", 50,300);
            
            //alert("x:"+x+"y"+y+"=== JENTE!!");
        }
        }
        for(var j=0;j<4;j++){
        if((x>=61+j*50*2 && x<=81+j*50*2)&& (y<=230 && y>230-tab[j+j]*20)){
           c.fillStyle = "black";
             c.font = "italic 96pt Arial ";
             c.fillText("this is text", 50,100);


        }
        }
          }*/
      
      }
      for(var i=0;i<tab2.length-4;i++){
         boy.fillStyle = "black";
         boy.font ="13pt Arial ";
         boy.fillText(tab2[i+i], 115,66+i*50);
         boy.stroke();
               
      }
      for(var i=0;i<tab2.length-4;i++){
         grl.fillStyle = "black";
         grl.font ="13pt Arial ";
         grl.fillText(tab2[1+i+i], 115,85+i*50);
         grl.stroke();
               
      }
      
}            
img.src = '/public/view/images/graphrating3.png'; 

          } 
         
      }
     



    
      var obj = new Graph;

